<!-- menuTable -->
<template>
  <div class="menuTable">
    <el-table
      ref="menuTable"
      row-key="Id"
      default-expand-all
      :tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }"
      :indent="48"
      :data="tableData"
      v-loading="listLoading"
      border
      stripe
      fit
      highlight-current-row
      :max-height="tableHeight"
    >
      <el-table-column label="菜单名称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.MenuName }}
        </template>
      </el-table-column>
      <el-table-column label="菜单链接" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.MenuPath }}
        </template>
      </el-table-column>
      <el-table-column label="菜单标识" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.Remark }}
        </template>
      </el-table-column>
      <el-table-column label="菜单图标" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.MenuIcon }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" @click="gotoEdit(scope.row)">编辑</el-button>
          <el-button size="small" @click="addChildMenu(scope.row)"
            >添加子菜单</el-button
          >
          <el-button size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/system/menu'
export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'menuTable',
  components: {},
  props: {
    systemType: {
      type: String,
      default: 'pc'
    },
    searchObj: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    //这里存放数据
    return {
      tableData: [],
      listLoading: false,
      tableHeight: 0
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    gotoEdit (row) {
      this.$emit('gotoedit', row)
    },
    addChildMenu (row) {
      this.$emit('addchildmenu', row)
    },
    getListFun (SortName = 'CreateDate', SortType = true) {
      let currentPage = this.searchObj.currentPage
      this.listLoading = true
      let searchObj = this.$deepClone(this.searchObj)
      let obj = {
        "MenuName": searchObj.MenuName, //页面名称
        "IsPaging": true, //是否分页
        "SortName": SortName, //排序栏位
        "SortType": SortType, //排序类型｛True：正序；Flase：反序｝
        'PageIndex': currentPage
      }
      getList(obj).then(res => {
        this.listLoading = false
        this.tableData = res.Data
        console.log(res)
      })
    },
    del () { }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    if (this.systemType == 'PC') {
      this.getListFun()
    }

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - this.$refs.menuTable.$el.offsetTop - 150;
    })
    window.onresize = () => {
      this.tableHeight = window.innerHeight - this.$refs.menuTable.$el.offsetTop - 150;
    }
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
</style>